<template>
    <div class="mr10 ui-border-dark p20 bg-white">
        <el-tabs v-model="evaluaRankTab" @tab-click="" style="width:800px">
            <el-tab-pane v-for="g in group" :key="g.label" :label="g.label" :name="g.label" class="flex row-around">
                <div v-for="item in g.data" class="text-center f18">
                    <ui-img :url="item.logo" size="60px" class="ui-circle ui-border mt10 mb20"></ui-img>
                    <div class="mb5 clamp-1 f18">{{item.name}}</div>
                    <div class="f-color-orange f21">{{item.score}}</div>
                    <div class="f-color-grey f14 mb20 clamp-1">高于同行{{parseFloat(item.good_percent*100).toFixed(2)}}%</div>
                    <el-button-group>
                        <el-button type="primary" size="small" @click="goDetails(item.post_id)" :disabled="item.post_id==null">视频</el-button>
                        <el-button type="primary" size="small" @click="goCepin(item.company_id)" :disabled="item.company_id==null">测评</el-button>
                    </el-button-group>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="最棒产品" name="2">配置管理</el-tab-pane>
            <el-tab-pane label="最牛运营" name="3">角色管理</el-tab-pane>
            <el-tab-pane label="最强硬件" name="4">定时任务补偿</el-tab-pane>
            <el-tab-pane label="最佳客服" name="5">定时任务补偿</el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                evaluaRankTab:'综合实力',
                group:[
                    {label:'综合实力'},
                    {label:'最棒产品',key:0},
                    {label:'最牛运营',key:1},
                    {label:'最强硬件',key:2},
                    {label:'最佳客服',key:3},
                ]
            }
        },
        mounted(){

            // 产品、运营、硬件、客服
            this.$http.get('index.php?g=home&m=paperRecord&a=company_list&paper_id=13', {
                params:{
                    node_type:1,
                    page_size:5,
                }
            })
            .then(({data})=>{
                console.log('产品、运营、硬件、客服',data);
                if (data.code===1) {
                    this.group.forEach((item)=>{
                        if (item.key!==undefined) {
                            this.$set(item, 'data', data.data[item.key])
                        }
                    })
                }
            })

            // 综合实力
            this.$http.get('index.php?g=home&m=paperRecord&a=company_list&paper_id=13',{
                params:{
                    node_type:0,
                    page_size:5,
                }
            })
            .then(({data})=>{
                console.log('综合实力',data)
                if (data.code===1) {
                    this.$set(this.group[0], 'data', data.data)
                }
            })

        },
        methods:{
            goCepin(id){
                this.$router.push({
                    name:'测评详情',
                    query:{
                        id:id
                    }
                })
            },
            goDetails(id){
                this.$router.push({
                    name:'文章详情',
                    query:{
                        id:id
                    }
                })
            }
        },
    }
</script>